<template>
  <section>
    <ul
      class="flex justify-between items-center text-[13px] text-[#666] py-[10px] px-[15px]"
      @click="expand = !expand"
    >
      <li class="flex-[1.5] w-0">
        <div
          :class="{
            'text-blue': item.Type == 1,
            'text-red': item.Type == 2
          }"
        >
          {{ typeMap[item.Type].text }}
        </div>
        <div class="break-all">{{ item.Name }}</div>
      </li>
      <li class="flex-1 w-0 text-center">
        <div>{{ moment(item.CreatedAt).format("MM月DD日") }}</div>
        <div>{{ moment(item.CreatedAt).format("HH:mm") }}</div>
      </li>
      <li class="flex-[1.5] w-0 text-center break-all">
        {{ formatCurrency(item.Amount) }}
      </li>
      <li
        class="flex-1 w-0 text-center"
        :class="{
          'text-red': item.Status == 3,
          'text-blue': item.Status == 2
        }"
      >
        <template v-if="item.Status == 1">
          <van-button
            size="small"
            type="primary"
            round
            class="!w-full !h-[24px]"
            @click.stop="emit('show', item.Id)"
          >
            待审核
          </van-button>
        </template>
        <template v-else>{{ statusMap[item.Status].text }}</template>
      </li>
    </ul>
    <div class="bg-[#f8f8f8] px-[15px]" v-if="expand">
      <ul class="text-[#888]">
        <li class="flex justify-between items-center py-[10px]">
          <div>用户名</div>
          <div>{{ item.Name }}</div>
        </li>
        <li class="flex justify-between items-center py-[10px]">
          <div>昵称</div>
          <div>{{ item.Nickname || "--" }}</div>
        </li>
        <li class="flex justify-between items-center py-[10px]">
          <div>申请方式</div>
          <div>{{ payTypeMap[item.PayType].text }}</div>
        </li>
        <li class="flex justify-between items-center py-[10px]">
          <div>审核时间</div>
          <div>{{ item.Status == 1 ? "--" : item.UpdatedAt }}</div>
        </li>
        <li class="flex justify-between items-center py-[10px]">
          <div>操作人</div>
          <div>{{ item.Issuer || "--" }}</div>
        </li>
        <li class="py-[10px] px-[15px]">
          <van-button type="primary" size="small" round block @click="emit('detail', item.UserId)">
            详情
          </van-button>
        </li>
      </ul>
    </div>
  </section>
</template>

<script setup lang="ts">
import { formatCurrency } from "@/utils/common";
import moment from "moment";

withDefaults(
  defineProps<{
    item: UpdownItemMo;
  }>(),
  {}
);

const payTypeMap: Record<string, TextType> = {
  0: { text: "后台上分", type: "success" },
  1: { text: "微信", type: "success" },
  2: { text: "支付宝", type: "primary" },
  3: { text: "银行卡", type: "danger" },
  4: { text: "虚拟币", type: "warning" }
};
const typeMap: Record<string, TextType> = {
  1: { text: "上分", type: "success" },
  2: { text: "下分", type: "danger" }
};
const statusMap: Record<string, TextType> = {
  1: { text: "审核", type: "primary" },
  2: { text: "通过", type: "success" },
  3: { text: "拒绝", type: "danger" }
};

const expand = ref(false);
const emit = defineEmits(["show", "detail"]);
</script>
